<script lang="ts" setup>
import type { Projects } from '@/common/types/projects'
import { useLayoutInfo } from '@/common/composables/useLayoutInfo'
import { NavigateItem, PagePath, PageTitle } from '@/common/constants'
import { getRandomActivityService } from '@/common/service/activity'
import { getRandomProjectService } from '@/common/service/projects'
import { updateUserPointService } from '@/common/service/users'
import { useUserStore } from '@/common/store'
import type { Activity } from '@/common/types/activity'

const { contentAreaHeight, tabBarHeight } = useLayoutInfo()
const { hope_user_info } = useUserStore()
/**
 * 轮播统一配置
 */
const SwiperConfig = {
  /** 是否采用衔接滑动，即播放到末尾后重新回到开头 */
  circular: true,
  /** 是否显示面板指示点  */
  indicatorDots: false,
  /** 是否自动切换 */
  autoplay: true,
  /** 自动切换时间间隔 */
  interval: 2000,
  /** 滑动动画时长 */
  duration: 500,
}

/** navigateList */
const navigateList = [
  NavigateItem.CALENDAR,
  NavigateItem.MY_ACTIVITY,
  NavigateItem.MY_PROJECT,
  NavigateItem.NOTIFICATION,
]

/**
 * 随机项目数据
 */
const project = ref<Projects>()
/**
 * 随机活动数据
 */
const activity = ref<Activity[]>()

const text = ['项目', '活动']

/**
 * 随机获取一个项目
 */
const getRandomProject = async () => {
  const { data } = await getRandomProjectService()
  project.value = data
}

/**
 * 随机获取五个活动
 */
const getRandomActivity = async () => {
  const { data } = await getRandomActivityService()
  activity.value = data
}

/**
 * 签到
 */
// TODO: 修改到 navigate onClick
const everydaySignIn = () => {
  // 判断用户是否登录
  if (hope_user_info === null) {
    uni.setStorageSync('isToLogin', true)
    return uni.switchTab({
      url: `${PagePath.MY}?isLogin=true`,
    })
  }

  uni.showModal({
    title: '每日小知识',
    content: '你好世界',
    confirmText: '签到',
    success(result) {
      if (result.confirm) {
        // 更新用户积分
        updateUserPointService(1).then((res) => {
          uni.showToast({
            title: res.data ? '签到成功 积分+1' : '签到失败 今日已签到',
            icon: 'none',
          })
        }).catch(() => {
          uni.showToast({
            title: '签到失败',
            icon: 'none',
          })
        })
      }
    },
  })
}

onLoad(async () => {
  Promise.all([getRandomProject(), getRandomActivity()])
})
</script>

<template>
  <template v-if="project && activity">
    <hope-nav-bar :title="PageTitle.HOME" />
    <scroll-view
      scroll-y class="scroll-view" :style="{
        height: `${contentAreaHeight - tabBarHeight}px`,
      }"
    >
      <view class="search-bar">
        <!-- 搜索栏组件 -->
        <hope-search-bar />
      </view>
      <!-- 推荐搜索 -->
      <hope-search-text :text="text" />
      <view class="navigate-list">
        <view v-for="navigate in navigateList" :key="navigate.icon" class="navigate-list-item" @click="() => navigate.onClick()">
          <hope-navigate-item :navigate-item="navigate" />
        </view>
      </view>
      <view v-if="project && activity" class="recommend">
        <uni-section title="推荐项目" type="line" title-font-size="17px" />
        <!-- 公益项目组件 -->
        <hope-projects v-if="project" :project="project" class="recommend-projects" />
        <uni-section title="推荐活动" type="line" title-font-size="17px" />
        <!-- 轮播图形式展示志愿者活动 -->
        <swiper
          class="recommend-activity-swiper" :circular="SwiperConfig.circular"
          :indicator-dots="SwiperConfig.indicatorDots" :autoplay="SwiperConfig.autoplay"
          :interval="SwiperConfig.interval" :duration="SwiperConfig.duration"
        >
          <swiper-item v-for="item in activity" :key="item.id" class="recommend-activity-swiper-item">
            <!-- 志愿者活动组件 -->
            <hope-activity :activity="item" button-size="sm" />
          </swiper-item>
        </swiper>
      </view>
    </scroll-view>
  </template>
</template>

<style lang="scss" scoped>
.search-bar {
  padding-inline: 30rpx
}

.navigate-list {
  display: flex;
  margin-top: 36rpx;
  justify-content: space-around;
  padding-inline: $padding-base;

}

.recommend {
  margin-top: 30rpx;
  padding: 30rpx;
  background-color: $color-white;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;

  &-activity-swiper {
    margin-top: 20rpx;
    height: 300rpx;

    &-item {
      display: block;
    }
  }

  &-projects {
    margin-bottom: 20rpx;
  }
}

:deep(.uni-section .uni-section-header) {
  padding: 0;
}
</style>
